<template>
  <div class="group_business">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @getMenuList="getMenuList" @handleChangeLan="handleChangeLan"/>
    <div class="group_business_img">
      <img :src="bannerImage" alt="" v-if="lang=='zh'">
      <img src="http://qiaoxin.oss-cn-shenzhen.aliyuncs.com/img/groupDisplay/jituan.png" alt="" v-else>
    </div>
    <ul class="group_business_list flex-box-container">
      <li v-for="(item, index) in groupBusiList" :style="{backgroundImage: 'url('+item.img+')'}" @click="handleClickIndex(index)"></li>
    </ul>
    <div class="culture_img flex-box-justify" @click="handleClickIndex(6)">
      <img src="../images/busi_culture.png" alt="" v-if="lang == 'zh'">
      <img src="../images/busi_culture_en.png" alt="" v-else-if="lang == 'en'">
    </div>
    <FixedMask :content="maskContent.content" :lang="lang" :title='maskContent.title' :url="maskContent.url" :showMask="showMaskFlag" @handleCloseMask="handleCloseMask"></FixedMask>
    <BottomInfo :lang="lang"/>
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { SwiperItem, Swiper } from 'vux'
  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";
  import FixedMask from "./common/fixedMask";

  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js")

  export default {
    components: {
      SwiperItem,
      Swiper,
      BottomInfo,
      QxHead,
      Menu,
      FixedMask
    },
    data() {
      return {
          lang: "",
        showModalFlag: false,
        showMaskFlag: false,
        groupBusiList: [{
          img: require("../images/busi_estate.png")
        },{
          img: require("../images/busi_construction.png")
        }, {
          img: require("../images/busi_aviation.png")
        }, {
          img: require("../images/busi_investment.png")
        }, {
          img: require("../images/busi_logistics.png")
        }, {
          img: require("../images/busi_cloud.png")
        }],
        bannerImage: "",
        maskContent: {
          title: "",
          content: ""
        }
      }
    },
    mounted() {
        this.lang = this.$i18n.locale

        if (this.lang == "zh") {
            this.groupBusiList = [{
                img: require("../images/busi_estate.png")
            },{
                img: require("../images/busi_construction.png")
            }, {
                img: require("../images/busi_aviation.png")
            }, {
                img: require("../images/busi_investment.png")
            }, {
                img: require("../images/busi_logistics.png")
            }, {
                img: require("../images/busi_cloud.png")
            }]
        } else if (this.lang == 'en') {
            this.groupBusiList = [{
                img: require("../images/busi_estate_en.png")
            },{
                img: require("../images/busi_construction_en.png")
            }, {
                img: require("../images/busi_aviation_en.png")
            }, {
                img: require("../images/busi_investment_en.png")
            }, {
                img: require("../images/busi_logistics_en.png")
            }, {
                img: require("../images/busi_cloud_en.png")
            }]
        }
    },
    methods: {
      getMenuList(data) {
        data.map( item => {
          if (item.link == location.pathname) {
            this.bannerImage = "https://qiaoxin.oss-cn-shenzhen.aliyuncs.com"+item.banner_image

          }
        })
      },
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      handleCloseMask() {
        this.showMaskFlag = false
      },
      handleClickIndex(index) {
          switch (index) {
              case 0:
                  this.maskContent = this.$i18n.messages[this.lang].content1
                  break;
              case 1:
                  this.maskContent = this.$i18n.messages[this.lang].content2
                  break;
              case 2:
                  this.maskContent = this.$i18n.messages[this.lang].content3
                  break;
              case 3:
                  this.maskContent = this.$i18n.messages[this.lang].content4
                  break;
              case 4:
                  this.maskContent = this.$i18n.messages[this.lang].content5
                  break;
              case 5:
                  this.maskContent = this.$i18n.messages[this.lang].content6
                  break;
              case 6:
                  this.maskContent = this.$i18n.messages[this.lang].content7
          }
          this.showMaskFlag = true
      },
        handleChangeLan(lan) {
            this.lang = this.$i18n.locale
            if (this.lang == "zh") {
                this.groupBusiList = [{
                    img: require("../images/busi_estate.png")
                },{
                    img: require("../images/busi_construction.png")
                }, {
                    img: require("../images/busi_aviation.png")
                }, {
                    img: require("../images/busi_investment.png")
                }, {
                    img: require("../images/busi_logistics.png")
                }, {
                    img: require("../images/busi_cloud.png")
                }]
            } else if (this.lang == 'en') {
                this.groupBusiList = [{
                    img: require("../images/busi_estate_en.png")
                },{
                    img: require("../images/busi_construction_en.png")
                }, {
                    img: require("../images/busi_aviation_en.png")
                }, {
                    img: require("../images/busi_investment_en.png")
                }, {
                    img: require("../images/busi_logistics_en.png")
                }, {
                    img: require("../images/busi_cloud_en.png")
                }]
            }
        },
    }
  };
</script>
<style lang="less">
  .group_business {
    /*padding-bottom: 1.31rem;*/
    .group_business_img {
      margin-bottom: .28rem;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .group_business_list {
      justify-content: center;
      li {
        width: 3.34rem;
        height: 2.78rem;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-right: .26rem;
        margin-bottom: .28rem;
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    .culture_img {
      margin-bottom: .34rem;
      img {
        width: 6.94rem;
        height: 2.78rem;
        vertical-align: middle;
      }
    }
  }
</style>

